<template>
  <div>
    <div id="line2"></div>
  </div>
</template>

    <script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("line2"));

      this.chart.setOption({
        color: ['#0C65F6', '#00FFA6', '#F4DF58'],
   tooltip: {
      confine: true,
      trigger: 'axis',
      axisPointer: {
         type: 'shadow',
      },
      textStyle: {
         color: '#fff',
         fontSize: 12,
         lineHeight: 24,
      },
      padding: [5, 10],
      backgroundColor: 'rgba(0, 0, 0, 0.50)',
      formatter(params) {	// 根据条件修改
         let unit = '个'
         let relVal = params[0].name
         for (let i = 0; i < params.length; i++) {
            if (i === 1) {
               unit = '%'
            }
            if (typeof (params[i].color) === 'string') {
               relVal += `<div class="g-flex"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color}"></div><div class="g-p-r-20">${params[i].seriesName}</div>${params[i].value} ${unit}</div>`
            } else {
               relVal += `<div class="g-flex"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color.colorStops[0].color}"></div><div class="g-p-r-20">${params[i].seriesName}</div>${params[i].value} ${unit}</div>`
            }
         }
         return relVal
      },
   },
   grid: {
      left: '12%',
      right: '14%',
      bottom: '10%',
      top: '20%',
   },
   legend: {
      icon: 'rect',
      orient: 'horizontal',
       x: 'center',
      y: '23%',
      itemWidth: 12,
      itemHeight: 12,
      formatter: ['{a|{name}}'].join('\n'),
      textStyle: {
         color: '#fff',
         height: 8,
         rich: {
            a: {
               verticalAlign: 'bottom',
            },
         },
      },
      data: ['舆论增长', '同比增长'],
   },
   xAxis: {
      type: 'category',
      data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
      axisLine: {
         lineStyle: {
            color: 'rgba(255,255,255,0.45)',
         },
      },
      axisLabel: {
         color: '#FFF',
      },
      axisTick: {
         show: false,
      },
   },
   yAxis: [{
      type: 'value',
      name: '(亿元)',
      nameTextStyle: {
         color: '#fff',
         padding: [0, 0, 0, 30],
      },
      min: 0,
      minInterval: 1,
      splitArea: {
         show: false,
      },
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         lineStyle: {
            color: 'rgba(255, 255, 255, 0.15)',
         },
      },
      axisLabel: {
         color: '#FFF',
         formatter: (params) => (params === 1 ? 0 : params),
      },
   }, {
      type: 'value',
      name: '(%)',
      nameTextStyle: {
         color: '#fff',
         padding: [0, 0, 0, 15],
      },
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         show: false,
      },
      axisLabel: {
         formatter: '{value}%', // 右侧Y轴文字显示
         color: '#FFF',
      },
      splitArea: {
         show: false,
      },
      min: 0,
      max: 100,
   }],
   series: [
      {
         name: '舆论增长',
         type: 'bar',
         barWidth: 16,
         barMinHeight: 10,
         itemStyle: {
            shadowColor: '#ffffff33',
            shadowBlur: 1,
            shadowOffsetX: 4,
            shadowOffsetY: -3,
            color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: '#5FD5EC' },
               { offset: 1, color: 'rgba(95, 213, 236, 0)' },
            ]),
         },
         data: [319, 998, 512, 198, 766],
      },
      {
         name: '同比增长',
         type: 'line',
         yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用QUANMEI
         smooth: false, // 平滑曲线显示
         symbol: 'circle', // 标记的图形为实心圆
         symbolSize: 8, // 标记的大小
         data: [52, 42, 12, 40, 25],
         itemStyle: { color: '#FFCF5F' },
      },
   ],
      });
    }
  },
  beforeDestroy() {
    //   console.log(this.chart);
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

    <style lang="scss" scoped>
#line2 {
  width: 100%;
  height: 40vh;
      // background-color: #554444;
}
</style>